<template>
  <div class="my-container">
    <user-bg></user-bg>
    <div class="down-content">
      密码修改
      <i class="icon iconfont el-icon-arrow-down"></i>
    </div>
    <div class="form">
      <form action="">
        <div class="box">
          <p class="label">请输入密码</p>
          <el-input class="input" v-model="user.oldPassword" type="password" clearable placeholder="请输入密码"></el-input>
        </div>

        <div class="box box2">
          <p class="label">请设置新的登录密码</p>
          <el-input class="input" v-model="user.newPassword" type="password" clearable placeholder="请设置新的登录密码"></el-input>
        </div>
        
        <div class="box box2">
          <p class="label">重复密码</p>
          <el-input class="input" v-model="user.newPassword2" type="password" clearable placeholder="请重复密码"></el-input>
        </div>

        <el-button type="primary" class="submit-btn" :disabled="disabledSuccess" round @click="submit()">完成</el-button>
        <p class="go-phone">
          遇到问题？
          <router-link to="">
            提交账户申诉
          </router-link>
        </p>
      </form>
    </div>
    <bot-contact></bot-contact>
  </div>
</template>

<script>
import userBg from '@/components/userBg';
import botContact from '@/components/botContact';
import { Toast } from 'mint-ui';
  export default {
    name: "index",
    data() {
      return {
        user: {
          oldPassword: '',
          newPassword: '',
          newPassword2: ''
        }
      }
    },
    components: {
      userBg,
      botContact
    },
    computed: {
      disabledSuccess() {
        if(this.user.newPassword2 == '') {
          return true;
        } else {
          return false;
        }
      }
    },
    created() {
      
    },
    mounted() {

    },
    methods: {
      
    }
  }
</script>

<style lang="less" scoped>
.promise(@css, @args) {
  @{css}: @args;
  -webkit-@{css}: @args;
  -moz-@{css}: @args;
  -ms-@{css}: @args;
  -o-@{css}: @args;
}
.my-container{
  padding-bottom: 140/37.5rem;
  .down-content{
    width: 100%;
    height: 90/37.5rem;
    line-height: 90/37.5rem;
    text-align: center;
    color: #666;
    font-size: 32/37.5rem;
    background: #fff;
    border-bottom: 12/37.5rem solid #eee;
  }
  .form{
    margin-top: 1rem;
    padding: 0 65/37.5rem;
    .box{
      margin: 0 35/37.5rem;
      border-bottom: 1px solid #ddd;
      .label{
        font-size: 36/37.5rem;
        color: #666;
        padding-left: 0.3rem;
      }
      .input2{
        width: 70%;
      }
      .danger{
        padding: 0 10px;
        height: 30px;
        margin-top: 0.2rem;
        color: red;
        background: #FF9999 !important;
      }
    }
    .box2{
      margin-top: 1rem;
    }
    .submit-btn{
      width: 627/37.5rem;
      height: 80/37.5rem;
      margin-top: 95/37.5rem;
      font-size: 34/37.5rem;
    }
    .go-phone{
      padding: 0 35/37.5rem;
      font-size: 24/37.5rem;
      margin: 0.8rem 0 1.5rem;
      display: block;
      a{
        color: #409eff;
      }
    }
    .text{
      text-align: center;
      font-size: 24/37.5rem;
      color: #bbb;
      a{
        color: #409eff;
      }
    }
  }
}
</style>
<style>
.my-container .box input{
  border: none !important;
  font-size: 36/37.5rem !important;
  color: #666 !important;
  padding: 0 0.3rem !important;
}
</style>
